
<link rel="stylesheet" href="./wu.css">
<div class="map"></div>
<script src='./wu.js'></script>
<script>
const mapObj=new ChessBox('.map')
</script>    
    <!-- <script>
    // 思路：
    // 1 生成棋盘 - 给col加  row、col属性  里面存放索引
    // 2 定义全局变量  results = [ ]
    // 3 下棋 - 显示棋子后 标记已落子
    
    
    // # 全局变量
    const mapObj = document.querySelector('.map')
    let results = [
        ['','','','','',  '','','','','', '','','','','',],
        ['','','','','',  '','','','','', '','','','','',],
        ['','','','','',  '','','','','',  '','','','','',],
        ['','','','','',  '','','','','',  '','','','','',],
        ['','','','','',  '','','','','',  '','','','','',],
    
        ['','','','','',  '','','','','',  '','','','','',],
        ['','','','','',  '','','','','',  '','','','','',],
        ['','','','','',  '','','','','',  '','','','','',],
        ['','','','','',  '','','','','',  '','','','','',],
        ['','','','','',  '','','','','',  '','','','','',],
    
        ['','','','','',  '','','','','',  '','','','','',],
        ['','','','','',  '','','','','',  '','','','','',],
        ['','','','','',  '','','','','',  '','','','','',],
        ['','','','','',  '','','','','',  '','','','','',],
        ['','','','','',  '','','','','',  '','','','','',],
    ]
   
    // # 生成棋盘
    let num = 0
    for (let row = 0; row < 15; row++) 
    {
        let rowObj = document.createElement("div");
        rowObj.className = 'row'
    
        for (let col = 0; col < 15; col++) 
        {
            num++
            let colObj = document.createElement("div");
            colObj.className = 'col'
            colObj.innerText = num
            rowObj.appendChild(colObj)
    
            // --------------------------
            colObj.setAttribute('row', row)
            colObj.setAttribute('col', col)
            // --------------------------
        }
    
        mapObj.appendChild(rowObj)
    }
    
    // # 下棋
    function random(min=0, max=1) {
        return Math.floor( Math.random() * (max-min+1)+min )
    }
    
    let targetObj = null
    let colorArr = ['black', 'white']
    let colorIndex = random() // 随机先手：0-黑，1-白
    mapObj.onclick = function(evt) {
        let e = evt || window.event
        let target = e.target || e.srcElement
    
        // 避免重复下棋
        if (target.className.includes('col ')) return
    
        // 下棋
        target.className = `col ${colorArr[colorIndex]}` 
    
        // --------------------------
        let rowI = target.getAttribute('row')
        let colI = target.getAttribute('col')
        results[rowI][colI] = colorArr[colorIndex]
        console.log('最新结果：',results);
        // --------------------------
    
        colorIndex = Number(!colorIndex)  // 重置棋子颜色  黑之后白 白之后黑
        targetObj = target // 保存最后点击盒模型 可以悔棋
    }
    
    // # 悔棋
    mapObj.oncontextmenu = function(evt) {
        let e  = evt || window.event
        e.preventDefault() 
    
        targetObj.className = 'col'
    
        colorIndex = Number(!colorIndex)  // 悔棋后还是之前的棋子
    
        let rowI = targetObj.getAttribute('row')
        let colI = targetObj.getAttribute('col')
        results[rowI][colI] = ''
        console.log('最新结果：',results);
    } -->
 